웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
타입스크립트에 대하여 짧고 간략하게 알아보려고 합니다. 훅~ 지나갈 수 있다는 점 참고하세요!
"그런데 타입스크립트 왜 알아야 할까? 반드시 알아야 할까?"
자바스크립트만 사용해도 될텐데 왜 어려운 타입스크립트까지 알아야 하는지 이해가 되지 않을 수 있죠... 물론 타입스크립트만의 장점이 있기 때문이겠지만 이와 별개로 요새는 대부분의 오픈소스나 참고 자료가 타입스크립트를 지원하거나 타입스크립트로 되어 있다는 점입니다. 그리고 점점 더 거대해지고 있습니다. 결국 원하지 않더라도 시간이 갈 수록 점점 더 타입스크립트를 이해하거나 알아야 할 상황에 늘어가고 있기에 더욱 알 필요가 생기게 되었다고 말 할 수 있습니다.
! 타입스크립트의 장점은?
그렇다면 타입스크립트를 사용했을 때 장점은 무엇일까요? 가장 큰 장점은 크게 두 가지입니다.
하나. 개발 과정의 실수나 에러를 줄여준다.
둘. 작성된 코드를 더 쉽게 파악하고 이해와 접근이 쉬워진다.
타입스크립트의 장점이라기에는 너무 작지 않냐고 생각하신다면 꼭 그렇지는 않습니다. 개발은 결국 조금이라도 더 나은 방법과 방향을 제시하면서 발전해가는 과정이니까요 ~
그런데 어떻게 실수나 에러를 줄여줄 수 있을까?
위 장점 중 첫 번째에서 실수나 에러를 줄여준다고 얘기했습니다. 사실 코딩하는 과정은 실수와 에러와의 싸움입니다... 수 많은 휴먼 에러가 발생할 수도 있고 정답이라고 찾아낸 구글링의 답안은 사실 또 다른 문제점을 가지고 있을 수도 있죠.
# 타입스크립트는?
타입스크립트의 장점을 설명하기 전에 타입스크립트가 무엇인지 설명해야겠죠. 타입스크립트는 유명한 Microsoft에서 개발된 자바스크립트 기반의 언어로 2012년 10월에 처음 소개되었습니다. 타입스크립트는 동적 타입 언어인 자바스크립트를 마치 자바나 C의 정적 타입 언어처럼 사용할 수 있도록 해줍니다.
자바스크립트 언어는 자유도가 매우 높은 언어로 타입의 선언이 없더라도 값에 따라 타입이 지정됩니다. 결국 에러 발생에 더 취약하다는 문제가 있는데 특히 에러를 발견하는 시점이 개발 이 후 런타임(run-time)에서야 발생한다는 점이 문제라고 할 수 있죠.
컴파일 언어 타입스크립트
타입스크립트는 인터프리터가 아닌 컴파일 언어입니다. 즉 컴파일러가 존재하고 에러를 런타임이 아닌 컴파일 시점에 미리 확인하고 수정할 수 있다는 장점을 가지게 됩니다. 복잡한 웹어플리케이션일수록 그 장점은 더더욱 크게 다가올 수 있겠죠. 또한 타입스크립트 관련 플러그인을 IDE 등에 설치하면 발생 가능한 이슈 등을 IDE에서도 미리 살펴보거나 관련 정보를 얻을 수도 있어 편리합니다.
이제 타입스크립트의 필요성을 조금 이해하였다면 실제로 타입스크립트를 사용하는 방법에 대하여 간략하게 알아보면 좋겠습니다. 그 전에 PC에 설치 후 Typescript을 작성하실 경우의 방법을 간략하게 알아봅니다. 이미 알거나 필요 없으신 경우에는 아래로 바로 넘어가셔도 됩니다.
[ 기타 ] Node에서 Typescript 설치 후 컴파일 해보기
먼저 타입스크립트를 node에서 실행하기 위해 typescript를 설치합니다. node가 없다면 node부터 설치해주세요!
> sudo npm install -g typescript
타입스크립트가 설치되면 cli에서 tsc 명령어를 사용할 수 있습니다. tsc는 타입스크립트 파일을 컴파일하여 자바스크립트로 반환합니다. 우선 처음 타입스크립트를 사용하기 위해서 설정 파일을 생성해보겠습니다.
> tsc --init
위 명령어를 수행하면 내부에 tsconfig.json 파일이 생성된 것을 볼 수 있습니다. 이제 ts 파일을 하나 만들고 컴파일 해보려고 합니다. vim 에디터를 사용하여 name.ts 파일을 만들어 봅니다.
> vim name.ts
let num: number = 123;
let num: number = 123;
저장하면 name.ts 이름의 파일이 생성되었습니다. 이제 tsc 명령어를 사용해 아래와 같이 입력해봅니다.
> tsc name.ts
// name.js 파일이 생성됨
// name.js 파일이 생성됨
동일한 곳에 name.js 파일이 생성된 것을 알 수 있습니다. name.js 파일의 내용은 다음과 같습니다.
var num = 3;
이처럼 자신의 PC에 타입스크립트 파일을 만들고 컴파일 할 수 있습니다.
! 타입스크립트 문법 및 예제
가장 많이 사용되고 기본이 되는 부분들을 위주로 먼저 알아봅니다. 일단 알아볼 내용은 다음과 같습니다.
타입스크립트를 사용하여 변수와 함수 만들기
참고로 ES 6를 모르신다면 한 번 보고 오시는 것도 좋을 것 같습니다. 그리고 알아보기에 앞서 타입스크립트를 직접 연습할 수 있는 웹사이트를 알려드립니다. 컴퓨터에 타입스크립트를 설치 후 컴파일 하면서 연습할 수 있지만 해당 웹사이트를 사용하면 더 편리합니다.
타입스크립트를 입력하고 실행과 컴파일 결과를 확인할 수 있음Typescript Playground 링크 바로가기 >
https://www.typescriptlang.org/play?#code/Q
타입스크립트를 사용하여 변수와 함수 만들기
먼저 자바스크립트에서 문자열을 사용한 변수를 선언할 때 아래와 같이 사용할 수 있겠죠.
let site = 'webisfree.com';
// 에러 없음
site = 123;
// 에러 없음
site = 123;
변수를 선언한 뒤 site의 값에 숫자를 사용하여 재선언해보았습니다. 자바스크립트에서는 아무런 에러 없이 잘 동작하며 site 변수의 타입은 문자열 string에서 숫자 number로 바뀌게 됩니다. 하지만 타입스크립트의 경우 타입을 타입을 한 번 명시하면 다른 타입으로 바꿀 수 없습니다. 즉 위와 같이 사용할 경우 에러가 발생하게 되겠죠.
이번에는 타입스크립트를 사용하여 표시해보도록 하겠습니다.
const site: string = 'webisfree';
// 타입 에러 발생
site = 123;
// 타입 에러 발생
site = 123;
타입스크립트는 값을 선언시 타입을 지정합니다. 위 예제를 보면 변수명 site 뒤에 콜론(:)을 사용한 뒤 타입명을 명시하였습니다. 이처럼 명시적으로 타입을 지정하여야 합니다. 그리고 다음 코드는 문자열로 지정된 변수 site에 숫자값을 입력하였습니다. 당연히 에러가 발생하게됩니다. 문자열 타입에는 반드시 문자열 값이 매핑되어야합니다. 아래와 같이 값을 입력하면 에러가 발생하지 않을 것입니다.
site = 'web123';
[ 참고 ]
물론 여러 타입을 함께 지정할 수 있는 유니온 타입 등의 방법이 존재합니다. 물론 이 경우에도 지정된 타입들 안에서만 값이 선언되어야 에러가 발생되지 않습니다.
추가적으로 타입스크립트에서 타입을 명시하지 않을 경우 모두 any 값으로 선언됩니다. 즉 아래와 같이 선언한 것처럼 동작하게 되죠.
const site: any = 'webisfree';
any는 어떤 값이든 사용할 수 있는 조커처럼 사용되는 타입입니다. 타입스크립트를 사용하는 경우 어떻게 사용할 것인지 설정할 수 있는데 예를들어 tsconfig.js 파일에 any를 사용할 것인지 아닌지를 설정할 수 있는 부분도 존재합니다. 설정 파일의 컴파일 옵션에 noImplicitAny의 값을 설정하면 되죠. 만약 any를 허용하지 않으려면 이를 불허하도록 noImplicitAny: true; 로 설정하여야 합니다. 즉 any 역시 타입이지만 타입스크립트의 목적에 부합하게 사용할 수 있도록 any를 가급적 사용하지 않거나 최대한 줄이는 방향으로 개발되어야 하겠습니다.
이번에는 함수를 만들어 봅니다.
const getSitename: Function = function(site: string): void {
};
};
함수의 타입은 string, number처럼 소문자가 아닌 대문자를 사용한 Function으로 설정해야 합니다. 그리고 뒤에 보면 함수의 인자를 사용하는 소괄호() 뒤에 void라고 표시된 부분이 있습니다. 이 자리는 함수의 반환값의 타입을 명시하는 자리로 void의 경우 반환값이 없음을 의미합니다. 만약 반환되는 값이 숫자라면 아래와 같이 사용할 수 있을 것입니다.
const getSitename: Function = function(site: string): string {
return 'webisfree';
};
return 'webisfree';
};
여기까지는 타입스크립트를 조금 이해하고 가장 기본이 되는 부분들 위주로 살펴보았습니다. 다음 번에는 여기서 다루지 않은 부분들 다루어 적어보도록 하겠습니다.
아래의 글도 찾고 계시지 않나요?
